<template>
  <div>
    <common-head title="商品列表" />
    <div class="wrap">
      <!-- 排序栏 -->
      <div class="filers">
        <div
          @click="switchOrder(0)"
          :class="[
            'sale',
            'filter',
            {
              active: active === 0,
            },
          ]"
        >
          <span>销量</span>
        </div>
        <div
          @click="orderByPrice"
          :class="[
            'price',
            'filter',
            {
              active: active === 1,
            },
          ]"
        >
          <span>价格</span>
          <div
            :class="[
              'triangle',
              'up',
              {
                active: active === 1 && priceOrder === 0,
              },
            ]"
          ></div>
          <div
            :class="[
              'triangle',
              'down',
              {
                active: active === 1 && priceOrder === 1,
              },
            ]"
          ></div>
        </div>
        <div
          @click="switchOrder(2)"
          :class="[
            'new',
            'filter',
            {
              active: active === 2,
            },
          ]"
        >
          <span>新品</span>
        </div>
      </div>
      <!-- /排序栏 -->
      <div class="items">
        <div
          class="item"
          @click="enterDetail(item.id)"
          v-for="item in items"
          :key="item.id"
        >
          <img class="item-pic" :src="item.pic" alt="" />
          <div class="item-info">
            <h5>{{ item.name }}</h5>
            <div class="item-price">
              <p class="price">￥{{ item.minPrice }}</p>
              <van-icon
                name="gouwuche"
                size="30"
                class-prefix="icon"
              ></van-icon>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CommonHead from '_components/CommonHead'
import { fetchItems } from '_api'
export default {
  name: 'itemLists',
  data () {
    return {
      active: 0, // 0 销量排序 1 价格排序 2发布时间排序
      priceOrder: 1, // 0 价格升序 1价格降序
      items: []
    }
  },
  created () {
    this.fetchItems()
  },
  methods: {
    enterDetail (id) {
      // 点击进入详情
      this.$router.push(`/detail/${id}`)
    },
    fetchItems () {
      fetchItems({
        // 请求商品列表 分类 和 排序
        categoryId: this.$route.query.cateId,
        orderBy: this.orderBy
      }).then(res => {
        if (res.data.code === 0) {
          this.items = res.data.data.result
        }
      })
    },
    switchOrder (active) {
      // 切换销量和发布时间排序
      this.active = active
      // 重新请求数据 重新排序
      this.fetchItems()
    },
    orderByPrice () {
      // 按照价格
      /*
        1 现在已经按照价格排序 切换升序还是降序
            切换priceOrder 0 和 1
        2 按照 其他排序（销量或者发布时间）
          active = 1 先按价格 默认按价格 升序 priceOrder = 0
      */
      if (this.active !== 1) {
        // 按照销量 或者 发布时间排序
        this.active = 1
        this.priceOrder = 0
      } else {
        // 按照价格排序 切换 价格升序还是降序
        if (this.priceOrder === 0) {
          this.priceOrder = 1
        } else {
          this.priceOrder = 0
        }
      }
      // 重新请求列表，按照价格排序
      this.fetchItems()
    }
  },
  computed: {
    orderBy () {
      /*
      判断两个变量
        active 0 销量 2发布时间  1 价格
        priceOrder 0价格升序 1 价格降序
      */
      let orderBy = 'ordersDown'
      switch (this.active) {
        case 0:
          // 按照销量、
          orderBy = 'ordersDown'
          break
        case 1:
          // 按照价格
          if (this.priceOrder === 0) {
          // 按照价格的升序
            orderBy = 'priceUp'
          } else {
            orderBy = 'priceDown'
          }
          break
        case 2:
          // 按照发布时间、
          orderBy = 'addedDown'
          break
        default:
          break
      }
      return orderBy
    }
  },
  components: {
    CommonHead
  }
}
</script>

<style lang="scss" scoped>
.filers {
  font-size: 14px;
  color: #333;
  display: flex;
  height: 40px;
  background-color: #fff;
  border-top: 0.025rem solid rgb(238, 237, 237);
  align-items: center;
  justify-content: space-around;
  .filter {
    &.active {
      color: #ff734c;
    }
    &.price {
      position: relative;
      .triangle {
        width: 0;
        height: 0;
        border: 4px solid transparent;
        position: absolute;
        right: -9px;
        &.up {
          border-bottom-color: #999;
          top: 2px;
          &.active {
            border-bottom-color: #ff734c;
          }
        }
        &.down {
          border-top-color: #999;
          top: 12px;
          &.active {
            border-top-color: #ff734c;
          }
        }
      }
    }
  }
}

.items {
  padding: 0 8px;
  .item {
    display: flex;
    background-color: #fff;
    border-radius: 0.1351rem;
    margin-bottom: 10px;
    img {
      width: 4.8649rem;
      height: 4.8649rem;
    }
    .item-info {
      flex: 1;
      padding: 0 10px;
      h5 {
        margin: 0;
        color: #333;
        font-size: 16px;
        line-height: 40px;
      }
      .item-price {
        color: #ff734c;
        font-size: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        p {
          margin: 0;
        }
      }
    }
  }
}
</style>
